<template>
  <div class="container__content__banner">
    <div
      class="container__content__banner__items"
      v-for="(item, index) of iconItems"
      :key="index"
    >
      <div
        class="container__content__banner__items__icon"
        v-html="item.icon"
      ></div>
      <div class="container__content__banner__items__content">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>
<script setup>
defineProps(["iconItems"]);
</script>
<style lang="scss" scoped>
.container__content__banner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 20rem 7rem;
  background-color: #fff;
  box-shadow: 0 3rem 6rem #eaeaeaa5;
  border-radius: 10rem;
  &__items {
    width: 80rem;
    height: 64rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin: 18rem 8rem;
    &__icon {
      font-size: 35rem;
      color: #691fff;
      margin: 10rem 0;
    }
    &__content {
      font-size: 16rem;
    }
  }
}
</style>
